<template>
  <div
    v-if="item"
    class="item position-relative px-[16px] py-[16px] h-[124px] bg-[#363a46] flex flex-col justify-between text-[var(--color-btn-text)] rounded-[8px] mb-[10px] cursor-pointer"
  >
    <div class="h-[40px] flex min-w-0 flex items-center">
      <el-image class="w-[40px] h-[40px]" :src="item.image"></el-image>
      <div class="flex-1 flex ml-[10px] flex-col justify-between">
        <span>{{ item?.name }}</span>
        <span class="text-[12px] text-[var(--color-text-base)]"
          >基于普通模型</span
        >
      </div>
      <div
        class="ml-auto collect"
        style="align-self: flex-start"
        @click.prevent="Collection(item?.id, item?.collect)"
      >
        <div class="scale-[0.85]">
          <Icon
            v-if="item?.collect == false"
            :size="24"
            color="#999"
            name="el-icon-Star"
          />
        </div>
        <Icon
          v-if="item?.collect == true"
          :size="24"
          name="el-icon-StarFilled"
          color="#FFB529"
        />
      </div>
    </div>
    <div class="tips">{{ item.tips }}</div>
  </div>
</template>
<script lang="ts" setup>
import {
  getCreationCategory,
  getCreationListsByCategory,
  creationCollection,
  creationCancelCollection,
} from "@/api/create";
const props = defineProps({
  item: {
    type: Object,
  },
});
const emits = defineEmits(["reset"]);
const Collection = async (id: number, status: boolean) => {
  if (!status) {
    await creationCollection({ id });
    feedback.msgSuccess("收藏成功");
    emits("reset");
  } else {
    await creationCancelCollection({ id });
    feedback.msgSuccess("取消收藏");
    emits("reset");
  }
};
</script>
<style lang="scss" scoped>

</style>
